<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        iframe {
            border: 5px solid black;
            margin-left: 1px;
            padding: 1px;
        }
    </style>
</head>

<body>

    <iframe srcdoc="<center><h1><b>Learn MySQL</b></h1></center>" name="header_frame" width="91%" height="100" frameborder="0" style="background-color: gray;"></iframe>
    <iframe src="nav.html" name="navigation_frame" width="25%" height="500" frameborder="0"></iframe>
    <iframe name="content_frame" width="65%" height="500" frameborder="0" style="background-color: coral;"></iframe>

</body>

</html>

<!-- 从对象到iframe - 其他嵌入技术 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -->
<!-- Iframe详解 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#iframe%E8%AF%A6%E8%A7%A3 -->
<!-- <iframe>元素旨在允许您将其他Web文档嵌入到当前文档中。 -->
<!-- src -->
<!-- 该属性与<video>/<img>一样包含指向要嵌入文档的URL路径。 -->
<!-- width 和 height -->
<!-- 这些属性指定您想要的iframe的宽度和高度。 -->
<!-- 备选内容 -->
<!-- 与<video>等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。 -->


<!-- <iframe> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe -->
<!-- HTML内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。 -->
<!-- 每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录(session history)和DOM树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。 -->
<!-- width -->
<!-- 以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定的 frame 的宽度。默认值是300。 -->
<!-- height -->
<!-- 以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。默认值为150。 -->
<!-- name -->
<!-- 用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。 -->
<!-- src -->
<!-- 被嵌套的页面的 URL 地址。使用 about:blank 值可以嵌入一个遵从同源策略的空白页。在 Firefox （version 65及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 iframe 的 src 属性（例如通过 Element.removeAttribute() ）会导致 about:blank 被载入 frame。 -->
<!-- srcdoc HTML5 only -->
<!-- 该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。 -->
<!-- https://www.runoob.com/tags/att-iframe-seamless.html -->
<!-- https://www.w3school.com.cn/tags/att_iframe_seamless.asp -->
<!-- seamless 属性属于逻辑属性。 -->
<!-- 当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）。 -->


<!-- margin -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin -->
<!-- padding -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding -->
<!-- border -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border -->